<!--
 * @Author: YWY
 * @Date: 2022-02-22 16:17:42
 * @LastEditors: YWY
 * @LastEditTime: 2022-03-03 19:39:18
-->
<template>
  <div class="plate-zoom-container">
    <van-divider dashed content-position="center">{{ title }}</van-divider>
    <div class="plate-zoom-article">
      <router-link
        v-for="item in articleList[0]"
        :key="item.id"
        :to="`/article/${item.id}`"
        class="plate_zoom_article_title van-ellipsis"
      >
        <van-icon name="volume" class="plat_zoom_volume"></van-icon
        >{{ item.title }}</router-link
      >
    </div>
  </div>
</template>

<script>
import { reactive } from "@vue/reactivity";
import { getSectionArticleList } from "@/api/services/user.service.js";
export default {
  props: ["title", "id"],
  setup(props) {
    const articleList = reactive([1, 2, 3]);
    //获取该分区文章
    const getArticleList = async () => {
      let res = await getSectionArticleList(props.id, 3);
      console.log(articleList);
      articleList[0] = res.result.article_list;
      console.log(articleList);
    };
    getArticleList();
    return { articleList };
  },
};
</script>

<style lang='less'>
.plate-zoom-container {
  .van-divider {
    color: #4662d9;
    font-size: 18px;
  }
  :before {
    border-color: #4662d9;
  }
  :after {
    border-color: #4662d9;
  }

  .plate-zoom-article .plate_zoom_article_title {
    display: block;
    font-size: 15px;
    color: #646566;
    padding: 0;
    margin: 10px 30px;
    text-align: left;
  }
  .plat_zoom_volume {
    margin-right: 10px;
  }
}
</style>